<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="aside1List">
      <div class="asideLeft">
        <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>
      </div>
      <div class="listCenter">
        <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
      </div>
    </div>
  </div>
</template>

<script>
import AsideBox from '@/components/Widgets/asideBox'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: { AsideBox, ListBox },
  props: {},
  data() {
    return {
      // 侧边栏数据
      asideList: [],
      itemAside: {},
      // 列表数据
      dataList: [],
      itemList: {},
      className: 'listImg5',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getAsideList();
  },
  updated() { },
  methods: {
    // 获取侧边栏数据
    getAsideList() {
      this.asideList = [
        { title: '喜剧', code: '1210' },
        { title: '科幻', code: '1211' },
        { title: '动作', code: '1212' },
        { title: '爱情', code: '1213' },
        { title: '动画', code: '1214' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
        { title: '军旅抗战', code: '1310' },
      ]

      this.itemAside = this.asideList.length > 0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData() {
      let listData = [
        {
          asideTitle: '喜剧', asideCode: '1210',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-2.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-3.jpg') },
            { title: '阴阳画皮年少好滴哦好等哈搜狐都爱', code: '111014', imgUrl: require('@/assets/img/r-4.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-5.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-6.jpg') },
          ]
        },
        {
          asideTitle: '科幻', asideCode: '1211',
          data: [
            { title: '爱的二八定律', code: '111111', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '我们的当打之年', code: '111112', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '你是我的荣耀', code: '111113', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '谢谢你医生', code: '111114', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '良辰美景好时光', code: '111115', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '陈情令', code: '111116', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '动作', asideCode: '1212',
          data: []
        },
        {
          asideTitle: '爱情', asideCode: '1213',
          data: [
            { title: '哥，你好', code: '111011', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '平凡英雄', code: '111012', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '独行月球', code: '111013', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '阴阳画皮', code: '111014', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '一周的朋友', code: '111015', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '侏罗纪世界3', code: '111016', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '动画', asideCode: '1214',
          data: [
            { title: '喜剧', code: '1210', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '科幻', code: '1211', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动作', code: '1212', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '爱情', code: '1213', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '动画', code: '1214', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
        {
          asideTitle: '军旅抗战', asideCode: '1310',
          data: [
            { title: '军旅抗战', code: '1310', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '古装历史', code: '1311', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '都市是生活', code: '1312', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '偶像爱情', code: '1313', imgUrl: require('@/assets/img/r-1.jpg') },
            { title: '青春校园', code: '1314', imgUrl: require('@/assets/img/r-1.jpg') },
          ]
        },
      ]

      listData.forEach(item => {
        if (this.itemAside.code == item.asideCode) {
          this.dataList = item.data;
        }
      })

      this.itemList = this.dataList.length > 0 ? this.dataList[0] : {};
    },
    // 切换侧边栏分类
    handleAside(item) {
      this.itemAside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data) {
      console.log(data);
      this.itemList = data;
    }
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.aside1List {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;
  display: flex;
  flex-direction: row;

  .asideLeft {
    width: 260px;
    height: 100%;
  }

  .listCenter {
    width: calc(100% - 260px);
    height: 100%;
  }

  .btnRight {
    width: calc(100% - 330px - 715px);
    height: 100%;
    display: flex;
    flex-direction: column;

    .seach {
      height: 30px;
      color: #fff;
      margin: 15px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .tatal {
      height: calc(100% - 130px);
    }
  }
}
</style>